<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <select id="province">
        <option value="-1">请选择</option>
     </select>
     <select id="city"></select>
     <select id="country"></select>
     <script>
       var provinceArr=['上海','江苏','河北'];
       var cityArr=[
           ['上海市'],
           ['苏州市','南京市','扬州市'],
           ['石家庄','秦皇岛','张家口']
       ];
       var countryArr=[
         [
           ['黄浦区','静安区','长宁区','浦东区']
         ],[
           ['虎丘区','吴中区','相城区','姑苏区','吴江区'],
           ['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
           ['邗江区','广陵区','江都区']
         ],[
           ['长安区','桥西区','新华区','井陉矿区'],
           ['海港区','山海关区','北戴河区','抚宁区'],
           ['桥东区','桥西区','宣化区','下花园区']
         ]
       ];
       function createOption(obj,data){
           for(var i in data){
            var op=new Option(data[i],i);
            obj.options.add(op);
           }
       }
       var province=document.getElementById('province');
       createOption(province,provinceArr);
       var city=document.getElementById('city');
       province.onchange=function(){
           city.options.length=0;
           createOption(city,cityArr[province.value]);
       };
       var country=document.getElementById('country');
       city.onchange=function(){
           country.options.length=0;
           createOption(country,countryArr[province.value][city.value]);
       };
       province.onchange=function(){
           city.options.length=0;
           createOption(city,cityArr[province.value]);
           if(province.value>=0){
               city.onchange();
           }else{
               country.options.length=0;
           }
       };
     </script>
      <p><a href="../第三章.html">返回</a></p>
 
</body>
</html>